<template>
  <div>
    <div class="detail-box" v-if="loadState == true">
      <comp-sousuo :state="seaNav">
        <template v-slot:text>
          <p>{{ detailArray.movie.typeDesc }}</p>
        </template>
      </comp-sousuo>
      <!-- typeDesc -->
      <!-- <p class="box-title">{{ detailArray.movie.typeDesc }}</p> -->
      <!-- 影片区 -->
      <div class="movie-detail">
        <!-- <img
          :src="`${detailArray.movie.img.replace(/w.h/, '570.400')}`"
          alt=""
        /> -->
        <img
          v-lazy="detailArray.movie.img.replace(/w.h/, '570.400')"
          :key="detailArray.movie.img"
        />
        <div class="detail-right">
          <!-- top -->
          <div class="right-top">
            <p>{{ detailArray.movie.nm }}</p>
            <span>{{ detailArray.movie.enm }}</span>
          </div>
          <!-- bottom -->
          <div class="right-bottom">
            <div class="bot-span">
              <span class="sp-1">{{ detailArray.movie.cat }}</span>
              <span class="sp-2">{{ detailArray.movie.ver }}</span>
            </div>
            <p class="bot-p">{{ detailArray.movie.pubDesc }}</p>
          </div>
          <div class="right-txt">
            <span @click="think(detailArray.movie.id)">
              <i v-if="thinkIndex" class="iconfont icon-dianzan"></i>
              {{ thinkIndex == true ? "想看" : "已想看" }}
            </span>
            <span @click="look(detailArray.movie.id)">
              <i v-if="lookIndex" class="iconfont icon-shoucang"></i>
              {{ lookIndex == true ? "看过" : "已看过" }}
            </span>
          </div>
        </div>
      </div>
      <!-- 简介 -->
      <div class="explain">
        <div class="explain-title">
          <p class="explain-title-p">简介</p>
          <span class="explain-title-s">展开></span>
        </div>
        <!-- 介绍文本区 -->
        <p class="exp-txt">
          {{ detailArray.movie.dra }}
        </p>
      </div>
      <!-- 演员 -->
      <div class="actor">
        <p>演员人员</p>
        <div class="actor-banner">
          <comp-autor :autor="autorArray"></comp-autor>
        </div>
      </div>
      <!-- 视频  剧照 -->
      <div class="video-detail">
        <ul class="video-detail-list">
          <li @click="flagPv" class="video-item">视频</li>
          <li @click="flagPv" class="video-pic">剧照</li>
        </ul>
        <!-- 组件 -->
        <div v-if="stateflag">
          <div class="video-text" v-if="videoTxtState">
            <span
              class="video-text-item"
              v-for="(te, ti) in videoArray.videoCommendModuleVOList"
              :key="ti"
            >
              {{ te.moduleName }} {{ te.videoCount }}
            </span>
          </div>
          <!-- <div class="video-text" v-if="videoTxtState ==false">
          <span>
           好家伙
          </span>
        </div> -->
          <comp-video :videot="videoArray"></comp-video>
        </div>
        <div v-if="!stateflag">
          <comp-photo :photo="pictureArray"></comp-photo>
        </div>
      </div>
      <!-- 评论 -->
      <div class="video-comment">
        <comp-comment :hotcomment="hotcomArray"></comp-comment>
      </div>
      <!-- 发表评论 -->
      <div class="video-answer">
        <!-- <comp-answer></comp-answer> -->
      </div>
    </div>
    <!-- <div class="loading" v-if="loadState == false">
      <p class="text-flowLight">正在加载...</p>
    </div> -->
    <div class="mask" v-if="show">
      <!-- <p class="p-1" v-if="isflag"></p> -->
      <p class="p-2">还没有登录</p>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import compAutor from "../components/comp-autor.vue";
import compVideo from "../components/comp-video.vue";
import compPhoto from "../components/comp-photo.vue";
import compComment from "../components/comp-comment.vue";
import compAnswer from "../components/comp-answer.vue";
import compSousuo from "../components/comp-sousuo.vue";
import throttle from "lodash/throttle"; //导入loadsh插件
export default {
  name: "detail",
  data() {
    return {
      detailArray: [],
      loadState: false,
      autorArray: [], //演员信息
      videoArray: [], //视频
      pictureArray: [], //剧照
      stateflag: true,
      hotcomArray: [], //热门评论
      videoTxtState: false,
      thinkIndex: true, //想看
      lookIndex: true, //看过
      show: false,
      seaNav: false, //导航条颜色
    };
  },
  components: {
    compSousuo,
    compAutor,
    compVideo,
    compPhoto,
    compComment,
    compAnswer,
  },
  computed: {
    ...mapGetters(["loginToken"]),
  },
  methods: {
    getData(k) {
      this.loadState = false;
      let pro = axios.get("movie/detail", {
        params: {
          movieid: k,
        },
      });
      pro
        .then((res) => {
          setTimeout(() => {
            this.loadState = true;
            this.detailArray = res;
          }, 1000);
          this.autorArray = res.celebrities; //演员
          this.videoArray = res.feedVideos; //视频
          this.pictureArray = res.movie.photos; //剧照
          this.hotcomArray = res.comments.hotComments; //热门评论
          // 判断是否有视频，剧照
          this.videoTxtState = res.hasOwnProperty("videoCommendModuleVOList");
          // console.log("视频详情-------", res, this.videoTxtState);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    getData1() {
      let pro = axios.get(
        "meituanmovie://www.meituan.com/movie/allvideos?movieid=1277950&moduleid=1"
      );
      pro
        .then((res) => {
          console.log("视频------", res);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    //  视频，剧照
    flagPv() {
      this.stateflag = !this.stateflag;
    },
    // 想看
    think(k) {
      // console.log("this.thinkIndex---", k);

      if (!this.loginToken) {
        this.show = true;
        setTimeout(() => {
          this.show = false;
        }, 1000);
        return;
      }
      this.thinkIndex = !this.thinkIndex;
      this.getLikeId(k);
    },
    look(k) {
      if (localStorage.getItem("token")) {
        // console.log("--------", k);
        this.lookIndex = !this.lookIndex;
      }
    },
    getLikeId(t) {
      this.axios
        .post("http://120.78.9.102:8006/api/like", {
          user_id: this.$store.getters.userInfo.id,
          like_id: t,
        })
        .then((res) => {
          console.log("点赞信息--->", res);
        });
    },
    explain(k) {
      let arr = [];
      for (let i = 0; i < k.length; i++) {
        // console.log(k[i].like_id);
        arr.push(k[i].like_id);
      }
      // console.log(arr.indexOf(this.$route.query.id) > -1);
      if (arr.indexOf(this.$route.query.id) > -1) {
        this.thinkIndex = false;
      }
    },
    scrollTop() {
      //滚动高度
      const scrollTopHeight =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTopHeight < 20) {
        this.seaNav = false;
      } else {
        this.seaNav = true;
      }
      console.log('------',this.seaNav);
    },
    tempScroll() {
      console.log("jieliu-----",throttle(this.scrollTop,200));
      // throttle(() => {
      //   console.log("jieliu-----");
      //   this.scrollTop
      // }, 100);
    },
  },
  created() {
    //  console.log(scrollHeight());
    // scrollHeight();
    this.getData(this.$route.query.id);
    if (localStorage.getItem("token")) {
      let k = this.$store.state.allLikeid.result;
      this.explain(k);
    }
  },
  // beforeRouteEnter(to, from, next) {
  //   console.log("进入");
  //   next();
  // },

  mounted() {
    // 节流
    // let timer = 0;
    // window.addEventListener("scroll", () => {
    //   if (!timer) {
    //     timer = setTimeout(() => {
    //       this.scrollTop();
    //       timer = 0;
    //     }, 200);
    //   }
    // });

    // 节流
    window.addEventListener("scroll", this.tempScroll,true);
  },
  beforeRouteLeave(to, from, next) {
    // debugger;
    window.removeEventListener("scroll", this.tempScroll,true);
    next(true);
    console.log("离开");
  },
  // deactivated(){
  //   window.removeEventListener("scroll",this.scrollTop,true);
  //   console.log('现在销毁scroll事件 在deactivaed')
  // },
  // beforeDestroy(){
  //   window.removeEventListener("scroll",this.scrollTop,true);
  //   console.log('现在销毁scroll事件')
  // },
  // destroyed(){
  //   window.removeEventListener("scroll",this.scrollTop,true);
  //   console.log('现在销毁scroll事件   在destroyed里面')
  // },
  // deactivated() {
  //   console.log("this.scrollTop 移除监听");
  //   let _this = this;
  //   window.removeEventListener("scroll", _this.scrollTop, false);
  // },
  // destroyed() {
  //   console.log("this.scrollTop 移除监听");
  //  let _this = this
  //   window.removeEventListener("scroll", _this.scrollTop, false);
  // },
};
</script>
<style lang="scss" scoped>
.detail-box {
  background: linear-gradient(to bottom, #2c3e50, #bdc3c7);
}
// 头部标题
.box-title {
  width: 100%;
  height: 44px;
  position: fixed;
  top: 0;
  left: 0;
  line-height: 44px;
  text-align: center;
  font-size: 22px;
  color: #ccc;
  font-weight: bold;
}
// 影片区
.movie-detail {
  width: 352px;
  margin: 0 auto;
  padding: 58px 0 14px;
  display: flex;
  justify-content: space-between;
  img {
    width: 110px;
    height: 150px;
    border-radius: 7px;
  }
  .detail-right {
    width: 65%;
    font-size: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    //   top
    .right-top {
      p {
        font-size: 20px;
        font-weight: bold;
        color: rgb(235, 235, 235);
      }
      span {
        width: 100%;
        display: inline-block;
        font-size: 10px;
        padding: 10px 0;
        color: #ccc;
      }
    }
    // bottom
    .right-bottom {
      width: 100%;
      // margin-top: 10px;
      .bot-span {
        width: 100%;
        margin-bottom: 6px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        .sp-1 {
          font-size: 14px;
          color: rgb(230, 230, 230);
        }
        .sp-2 {
          margin-left: 5px;
          font-size: 10px;
          color: rgb(230, 230, 230);
        }
      }
      .bot-p {
        margin-bottom: 6px;
        font-size: 12px;
        color: rgb(230, 230, 230);
      }
    }
    .right-txt {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
      span {
        width: 100px;
        height: 28px;
        border-radius: 6px;
        text-align: center;
        line-height: 28px;
        background: #c0c0c0;
        box-shadow: 0 0 1px #9b9b9b;
        font-size: 16px;
        font-weight: bold;
        color: #f9fafa;
        i {
          font-size: 18px;
        }
      }
    }
  }
}
// 简介
.explain {
  width: 352px;
  margin: 0 auto;
  padding: 10px 0;
  .explain-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .explain-title-p {
      font-size: 18px;
      font-weight: bold;
    }
    .explain-title-s {
      font-size: 14px;
    }
  }
  .exp-txt {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    text-indent: 26px;
    //
    overflow: hidden;
    text-overflow: ellipsis; //超出部分用...代替
    display: -webkit-box;
    //  动态控制
    -webkit-line-clamp: 2; //在第几行显示...
    -webkit-box-orient: vertical;
  }
}
// 演员
.actor {
  width: 352px;
  margin: 0 auto;
  p {
    font-size: 20px;
    font-weight: bold;
  }
  .actor-banner {
    padding: 10px 0;
    width: 100%;
    overflow: hidden;
  }
}
// 视频  剧照
.video-detail {
  width: 352px;
  margin: 0 auto;
  overflow: hidden;
  .video-detail-list {
    display: flex;
    padding: 10px 0;
    .video-item {
      padding: 5px 10px;
      padding-left: 0;
      font-size: 20px;
      font-weight: bold;
    }
    .video-pic {
      font-size: 20px;
      font-weight: bold;
      padding: 5px 10px;
    }
  }
}
.video-text {
  display: flex;
  //   padding-bottom: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
  .video-text-item {
    font-size: 10px;
    background: rgba(0, 0, 0, 0.3);
    padding: 3px 6px;
    border-radius: 20px;
    margin-left: 5px;
    margin-bottom: 5px;
  }
}
// 动画
.loading {
  width: 100px;
  height: 30px;
  border-radius: 7px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: rgba(0, 0, 0, 0.3);
}
.text-flowLight {
  position: relative;
  width: 100px;
  text-align: center;
  line-height: 30px;
  background-image: -webkit-linear-gradient(
    left,
    #b1c0ff,
    #b3ffb3,
    #ffbaba 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 2s forwards linear infinite;
  font-weight: 700;
  white-space: nowrap;
  font-size: 16px;
}
@keyframes masked-animation {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -200% 0;
  }
}
// 遮罩层
.mask {
  width: 100%;
  position: fixed;
  bottom: 200px;
  z-index: 99;
  animation: masked 1.2s linear;

  .p-1 {
    width: 100%;
    text-align: center;
    font-size: 22px;
    color: rgb(17, 120, 255);
  }
  .p-2 {
    width: 100%;
    text-align: center;
    font-size: 22px;
    color: rgb(255, 0, 0);
  }
}
@keyframes masked {
  0% {
    transform: scale(0.8);
  }
  25% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(0);
  }
}
</style>